<!--
 * @Author: 敬华丰 2637844016@qq.com
 * @Date: 2023-04-27 14:07:01
 * @LastEditors: 敬华丰 2637844016@qq.com
 * @LastEditTime: 2023-05-05 09:43:29
 * @FilePath: \imedia_crm-branch_v5.0.1_0518\src\allocation\resourceManage\membership\components\c-membership-form.vue
 * @Description: 金额区间输入框
-->
<template>
  <div class="el-input__inner mount-range">
    <input :disabled="disabled" @focus="onFocusChange(0)" @blur="onStart($event)" v-model="start" autocomplete="off" type="text" class="flex-1" placeholder="请输入起始金额"></input>
    <div class="mr-lg ml-lg">至</div>
    <input :disabled="disabled" @focus="onFocusChange(1)" @blur="onEnd($event)" v-model="end" type="text" class="flex-1" placeholder="请输入结束金额"></input>
  </div>
</template>
<script>
export default {
  props: {
    value: {
      type: Array,
      default: () => [],
    },
    disabled: {
      type: Boolean,
      default:false
    },
  },
  watch: {
    value: {
      handler(newValue) {
        console.log(newValue);
        if (newValue[0] && newValue[1]) {
          this.start = this.thousands(newValue[0]);
          this.end = this.thousands(newValue[1]);
          this.interval = [
            this.translateNumber(newValue[0]),
            this.translateNumber(newValue[1]),
          ];
        } else {
          this.$set(this, "interval", []);
          this.$set(this, "start", "");
          this.$set(this, "end", "");
        }
      },
      immediate: true,
    },
  },
  model: {
    prop: "value",
    event: "change", 
  },
  data() {
    return {
      start: "",
      end: "",
      interval: this.value || [],
    };
  },
  methods: {
    onFocusChange(type) {
      if (this.start && type === 0) {
        this.start = this.translateNumber(this.start);
      }
      if (this.end && type === 1) {
        this.end = this.translateNumber(this.end);
      }
    },
    onStart(event) {
      if (isNaN(event.currentTarget.value * 1)) {
        this.onEmpty();
        this.$message.warning("起始金额请输入数字");
        return;
      }

      this.interval[0] = event.currentTarget.value;
      this.onEmit();
    },
    onEnd(event) {
      if (!this.interval[0]) {
        this.onEmpty();
        this.$message.warning("请先输入起始金额");
        return;
      }
      if (isNaN(event.currentTarget.value * 1)) {
        this.onEmpty();
        this.$message.warning("结束金额请输入数字");
        return;
      }

      this.interval[1] = event.currentTarget.value;
      this.onEmit();
    },
    onEmit() {
      if (this.interval[1] * 1 <= this.interval[0] * 1) {
        this.onEmpty();
        this.$message.warning("结束金额必须大于起始金额");
        return;
      }
      if (this.interval[0]) {
        this.start = this.thousands(this.interval[0]);
      } else {
        this.onEmpty();
        return;
      }
      if (this.interval[1]) {
        this.end = this.thousands(this.interval[1]);
      }
      if (this.interval[0] && this.interval[1]) {
        this.$emit("change", this.interval);
      }
    },
    onEmpty() {
      this.$emit("change", []);
    },
  },
};
</script>
<style scoped lang="scss">
.mount-range {
  display: flex !important;
  align-items: center !important;
  input {
    border: none !important;
    background: none !important;
    outline: none !important;
    font-size: 14px !important;
    color: #606266 !important;
    text-align: center !important;
    width: 100%;
  }
  input::-webkit-input-placeholder {
    color: #aab2bd !important;
    font-size: 14px !important;
  }
}
</style>
